<div nz-row class="msg-content">
  <div nz-col nzSpan="24">
    <label>
      <textarea [(ngModel)]="content" nz-input rows="3" placeholder="今天心情如何 写上两句吧.."></textarea>
    </label>
  </div>
</div>

<div nz-row style="margin-top: 5px;">
  <div nz-col nzSpan="22">
  </div>
  <div nz-col nzSpan="2">
    <button nz-button class="login-form-button login-form-margin" style="float: right;"
            [nzType]="'primary'" (click)="insertTweets()" [disabled]="this.content.trim().length === 0">
      发布
    </button>
  </div>
</div>


<nz-card [nzBordered]="false" style="margin-top: 20px;">
  <nz-list
    nzItemLayout="vertical"
    [nzLoading]="loading"
    [nzDataSource]="list"
    [nzRenderItem]="item"
    [nzLoadMore]="loadMore"
  >
    <ng-template #item let-item>
      <nz-list-item [nzContent]="nzContent" [nzExtra]="nzExtra" [nzActions]="[op1, op2]">
        <nz-list-item-meta>
          <nz-list-item-meta-avatar nzSrc="{{'api/file/view-picture/' + item.avatarId }}"></nz-list-item-meta-avatar>
          <nz-list-item-meta-title>
            <a href="{{ item.href }}">{{ item.createUsername }}</a>
          </nz-list-item-meta-title>
          <nz-list-item-meta-description>
            <span class="px-sm">发布于</span> <time class="pl-md text-grey" >{{ item.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</time>
          </nz-list-item-meta-description>
        </nz-list-item-meta>

        <ng-template #op1><i nz-icon nzType="like" class="mr-sm" (click)="like(item)" style="cursor: pointer"></i>{{ item.up }}</ng-template>
        <ng-template #op2><i nz-icon nzType="message" class="mr-sm" style="cursor: pointer"></i>{{ item.message }}</ng-template>
        <ng-template #nzExtra>
        </ng-template>

        <ng-template #nzContent>
          <p>{{ item.content }}</p>

          <br/>


          <!--<nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
            <input type="text" nz-input placeholder="输入你的评论" style="width: 500px" />
          </nz-input-group>

          <ng-template #suffixIconButton>
            <button nz-button nzType="primary" nzSearch>评论</button>
          </ng-template>-->
        </ng-template>



      </nz-list-item>
    </ng-template>

    <ng-template #loadMore>
      <div class="text-center mt-md">

        <button *ngIf="moreData" nz-button (click)="getData(true)" [nzLoading]="loading" [nzType]="'dashed'"
                style="min-width:200px;">
          加载更多
        </button>
      </div>
    </ng-template>

  </nz-list>
</nz-card>


